<template>
  <div>
    <div>foreground：<img :src="userPhoto1" class="avatar"/></div>
    <div>scoremap：<img :src="userPhoto2" class="avatar"/></div>
    <div>labelmap：<img :src="userPhoto3" class="avatar"/></div>
    <el-upload
      action="http://localhost:3000/upload/baidu/img"
      name="baidu"
      :show-file-list="false"
      :headers="uploadHeaders"
      :on-success="handleAvatarSuccess"
    >
      <el-button>上传</el-button>
    </el-upload>
  </div>
</template>

<script>
  import Cache from '@/cache'

  export default {
    data() {
      return {
        uploadHeaders: '',
        userPhoto1: '',
        userPhoto2: '',
        userPhoto3: ''
      }
    },
    created() {
      const user = Cache.get('USER') || {token: ''}
      this.uploadHeaders = {authorization: `Bearer ${user.token}`}
    },
    mounted() {
      this.$nextTick(() => {
      })
    },
    methods: {
      handleAvatarSuccess(res, file) {
        const {extName, result} = res.data
        const {foreground} = JSON.parse(result)
        this.userPhoto1 = `data:image/${extName};base64,${foreground}`
        console.log(extName)
        console.log(JSON.parse(result))
      },
      handleChangeInputFile() {
        const files = this.$refs.iptFile.files[0]
        const reader = new FileReader()
        reader.onloadend = () => {
          this.userPhoto1 = reader.result
        }
        if (files) {
          reader.readAsDataURL(files)
        }
      }
    }
  }
</script>

<style scoped>

</style>
